<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="description" content="Moveable is Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable!" />
    <meta property="og:title" content="Moveable is Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable!">
    <meta property="og:url" content="http://daybrush.com/moveable">
    <meta property="og:image" content="http://daybrush.com/moveable/images/moveable1920x1080.png">
    <meta property="og:description" content="Moveable is Draggable! Resizable! Scalable! Rotatable! Warpable!">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Moveable is Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable!">
    <meta name="twitter:url" content="http://daybrush.com/moveable">
    <meta name="twitter:image" content="http://daybrush.com/moveable/images/moveable1920x1080.png">
    <meta name="twitter:description"
        content="Moveable is Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable!">
    <meta name="theme-color" content="#f5f5f5">
    <title>Moveable is Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable!</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/styles/default.min.css">
    <link rel="stylesheet" type="text/css" href="./dist/index.css" />
</head>

<body>
    <div class="label"></div>
    <div class="page main">
        <div class="controls">
            <div class="control"><span>X:</span><input type="text" value="0" name="x" /></div>
            <div class="control"><span>Y:</span><input type="text" value="0" name="y" /></div>
            <div class="control"><span>W:</span><input type="text" value="250" name="w" /></div>
            <div class="control"><span>H:</span><input type="text" value="200" name="h" /></div>
            <div class="control"><span>R:</span><input type="text" value="0°" name="r" /></div>
        </div>
        <div class="editor">
            <div class="guidelines"></div>
            <div class="rulers">
                <div class="horizontal ruler">
                    <div class="divisions"></div>
                </div>
                <div class="vertical ruler">
                    <div class="divisions"></div>
                </div>
            </div>
            <div class="view">
                <div class="target moveable"><span>Moveable</span></div>
                <div class="container">
                    <p class="badges">
                        <a href="https://www.npmjs.com/package/moveable" target="_blank">
                            <img src="https://img.shields.io/npm/v/moveable.svg?style=flat-square&color=007acc&label=version"
                                alt="npm version" /></a>
                        <a href="https://github.com/daybrush/moveable" target="_blank">
                            <img
                                src="https://img.shields.io/github/stars/daybrush/moveable.svg?color=42b883&style=flat-square" /></a>
                        <a href="https://github.com/daybrush/moveable" target="_blank">
                            <img src="https://img.shields.io/badge/language-typescript-blue.svg?style=flat-square" />
                        </a>
                        <a href="https://github.com/daybrush/moveable/blob/master/LICENSE" target="_blank">
                            <img
                                src="https://img.shields.io/github/license/daybrush/moveable.svg?style=flat-square&label=license&color=08CE5D" />
                        </a>
                        <a href="https://github.com/daybrush/moveable/tree/master/packages/react-moveable"
                            target="_blank"><img alt="React"
                                src="https://img.shields.io/static/v1.svg?label=&message=React&style=flat-square&color=61daeb"></a>
                        <a href="https://github.com/daybrush/moveable/tree/master/packages/preact-moveable"
                            target="_blank"><img alt="React"
                                src="https://img.shields.io/static/v1.svg?label=&message=Preact&style=flat-square&color=673ab8"></a>
                        <a href="https://github.com/daybrush/moveable/tree/master/packages/ngx-moveable"
                            target="_blank"><img alt="React"
                                src="https://img.shields.io/static/v1.svg?label=&message=Angular&style=flat-square&color=C82B38"></a>
                        <a href="https://github.com/probil/vue-moveable" target="_blank"><img alt="Vue"
                                src="https://img.shields.io/static/v1.svg?label=&message=Vue&style=flat-square&color=3fb984"></a>
                    </p>
                    <p class="description">Moveable is Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable!
                    </p>
                    <div class="buttons">
                        <a href="https://github.com/daybrush/moveable" target="_blank">Download</a>
                        <a href="./release/latest/doc" target="_blank">API</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="page feature">
        <h2 class="container">Features</h2>
        <div class="container">
            <div class="left">
                <div class="moveable draggable"><span>Draggable</span></div>
            </div>
            <div class="right">
                <p class="description"><strong>Draggable</strong> refers to the ability to drag and move targets.</p>
                <button class="tab selected" data-tab="vanilla" data-group="draggable">Vanilla</button>
                <button class="tab" data-tab="react" data-group="draggable">React</button>
                <button class="tab" data-tab="preact" data-group="draggable">Preact</button>
                <button class="tab" data-tab="angular" data-group="draggable">Angular</button>
                <pre class="panel selected" data-panel="vanilla"
                    data-group="draggable"><code class="javascript"></code></pre>
                <pre class="panel" data-panel="react" data-group="draggable"><code class="javascript"></code></pre>
                <pre class="panel" data-panel="preact" data-group="draggable"><code class="javascript"></code></pre>
                <pre class="panel" data-panel="angular" data-group="draggable"><code class="javascript"></code></pre>
            </div>
        </div>
        <div class="container">
            <div class="left">
                <div class="moveable resizable"><span>Resizable</span></div>
            </div>
            <div class="right">
                <p class="description"><strong>Resizable</strong> indicates whether the target's width and height can be
                    increased or decreased.</p>
                <button class="tab selected" data-tab="vanilla" data-group="resizable">Vanilla</button>
                <button class="tab" data-tab="react" data-group="resizable">React</button>
                <button class="tab" data-tab="preact" data-group="resizable">Preact</button>
                <button class="tab" data-tab="angular" data-group="resizable">Angular</button>
                <pre class="panel selected" data-panel="vanilla"
                    data-group="resizable"><code class="javascript"></code></pre>
                <pre class="panel" data-panel="react" data-group="resizable"><code class="javascript"></code></pre>
                <pre class="panel" data-panel="preact" data-group="resizable"><code class="javascript"></code></pre>
                <pre class="panel" data-panel="angular" data-group="resizable"><code class="javascript"></code></pre>
            </div>
        </div>
        <div class="container">
            <div class="left">
                <div class="moveable scalable"><span>Scalable</span></div>
            </div>
            <div class="right">
                <p class="description"><strong>Scalable</strong> indicates whether the target's x and y can be scale of
                    transform.</p>
                <button class="tab selected" data-tab="vanilla" data-group="scalable">Vanilla</button>
                <button class="tab" data-tab="react" data-group="scalable">React</button>
                <button class="tab" data-tab="preact" data-group="scalable">Preact</button>
                <button class="tab" data-tab="angular" data-group="scalable">Angular</button>

                <pre class="panel selected" data-panel="vanilla"
                    data-group="scalable"><code class="javascript"></code></pre>
                <pre class="panel" data-panel="react" data-group="scalable"><code class="javascript"></code></pre>
                <pre class="panel" data-panel="preact" data-group="scalable"><code class="javascript"></code></pre>
                <pre class="panel" data-panel="angular" data-group="scalable"><code class="javascript"></code></pre>
            </div>
        </div>
        <div class="container">
            <div class="left">
                <div class="moveable rotatable"><span>Rotatable</span></div>
            </div>
            <div class="right">
                <p class="description"><strong>Rotatable</strong> indicates whether the target can be rotated.</p>
                <button class="tab selected" data-tab="vanilla" data-group="rotatable">Vanilla</button>
                <button class="tab" data-tab="react" data-group="rotatable">React</button>
                <button class="tab" data-tab="preact" data-group="rotatable">Preact</button>
                <button class="tab" data-tab="angular" data-group="rotatable">Angular</button>
                <pre class="panel selected" data-panel="vanilla"
                    data-group="rotatable"><code class="javascript"></code></pre>
                <pre class="panel" data-panel="react" data-group="rotatable"><code class="javascript"></code></pre>
                <pre class="panel" data-panel="preact" data-group="rotatable"><code class="javascript"></code></pre>
                <pre class="panel" data-panel="angular" data-group="rotatable"><code class="javascript"></code></pre>
            </div>
        </div>
        <div class="container">
            <div class="left">
                <div class="moveable warpable"><span>Warpable</span></div>
            </div>
            <div class="right">
                <p class="description"><strong>Warpable</strong> indicates whether the target can be warped.</p>
                <button class="tab selected" data-tab="vanilla" data-group="warpable">Vanilla</button>
                <button class="tab" data-tab="react" data-group="warpable">React</button>
                <button class="tab" data-tab="preact" data-group="warpable">Preact</button>
                <button class="tab" data-tab="angular" data-group="warpable">Angular</button>
                <pre class="panel selected" data-panel="vanilla"
                    data-group="warpable"><code class="javascript"></code></pre>
                <pre class="panel" data-panel="react" data-group="warpable"><code class="javascript"></code></pre>
                <pre class="panel" data-panel="preact" data-group="warpable"><code class="javascript"></code></pre>
                <pre class="panel" data-panel="angular" data-group="warpable"><code class="javascript"></code></pre>
            </div>
        </div>
        <div class="container">
            <div class="left">
                <div class="moveable pinchable"><span>Pinchable</span></div>
            </div>
            <div class="right">
                <p class="description"><strong>Pinchable</strong> indicates whether the target can be pinched with
                    draggable, resizable, scalable, rotatable.<br />(Check on the mobile) </p>
                <button class="tab selected" data-tab="vanilla" data-group="pinchable">Vanilla</button>
                <button class="tab" data-tab="react" data-group="pinchable">React</button>
                <button class="tab" data-tab="preact" data-group="pinchable">Preact</button>
                <button class="tab" data-tab="angular" data-group="pinchable">Angular</button>
                <pre class="panel selected" data-panel="vanilla"
                    data-group="pinchable"><code class="javascript"></code></pre>
                <pre class="panel" data-panel="react" data-group="pinchable"><code class="javascript"></code></pre>
                <pre class="panel" data-panel="preact" data-group="pinchable"><code class="javascript"></code></pre>
                <pre class="panel" data-panel="angular" data-group="pinchable"><code class="javascript"></code></pre>
            </div>
        </div>
        <div class="container">
            <div class="left">
                <div class="moveable groupable"><span>G1</span><span>G2</span><span>G3</span></div>
            </div>
            <div class="right">
                <p class="description"><strong>Groupable</strong> indicates Whether the targets can be moved in group
                    with draggable, resizable, scalable, rotatable.
                </p>
                <button class="tab selected" data-tab="vanilla" data-group="groupable">Vanilla</button>
                <button class="tab" data-tab="react" data-group="groupable">React</button>
                <button class="tab" data-tab="preact" data-group="groupable">Preact</button>
                <button class="tab" data-tab="angular" data-group="groupable">Angular</button>
                <pre class="panel selected" data-panel="vanilla"
                    data-group="groupable"><code class="javascript"></code></pre>
                <pre class="panel" data-panel="react" data-group="groupable"><code class="javascript"></code></pre>
                <pre class="panel" data-panel="preact" data-group="groupable"><code class="javascript"></code></pre>
                <pre class="panel" data-panel="angular" data-group="groupable"><code class="javascript"></code></pre>
            </div>
        </div>
        <div class="container">
            <div class="left">
                <div class="moveable snappable"><span>Snappable</span></div>
            </div>
            <div class="right">
                <p class="description"><strong>Snappable</strong> indicates whether to snap to the guideline.</p>
                <button class="tab selected" data-tab="vanilla" data-group="snappable">Vanilla</button>
                <button class="tab" data-tab="react" data-group="snappable">React</button>
                <button class="tab" data-tab="preact" data-group="snappable">Preact</button>
                <button class="tab" data-tab="angular" data-group="snappable">Angular</button>
                <pre class="panel selected" data-panel="vanilla"
                    data-group="snappable"><code class="javascript"></code></pre>
                <pre class="panel" data-panel="react" data-group="snappable"><code class="javascript"></code></pre>
                <pre class="panel" data-panel="preact" data-group="snappable"><code class="javascript"></code></pre>
                <pre class="panel" data-panel="angular" data-group="snappable"><code class="javascript"></code></pre>
            </div>
        </div>
        <div class="buttons"><a href="./release/latest/doc" class="button">More Features</a></div>
    </div>
    <div class="page footer">
        <div class="container">

            <p>Copyright &copy; Daybrush</p>
            <p>
                <span><a href="https://github.com/daybrush" target="_blank">github</a></span>
                <span><a href="https://codepen.io/daybrush" target="_blank">codepen</a></span>
                <span><a href="https://medium.com/@daybrush" target="_blank">medium</a></span>
                <span><a href="https://twitter.com/daybrush" target="_blank">twitter</a></span>
            </p>
            <p>daybrush@gmail.com</p>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/highlight.min.js"></script>
    <script src="./dist/index.js"></script>
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-128864447-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());
        gtag('config', 'UA-128864447-1');
    </script>
</body>

</html>
